<template>
  <view class="content">
    <button size="default" type="default" class="common_style">
      在线联系客服
    </button>
    <view class="operate common_style">操作说明</view>
    <view class="operate common_style" style="margin-bottom: 20rpx">
      可以查看您的视频在抖音的数据,并选择您觉得数据优秀的视频进行加热
    </view>
    <z-paging
      ref="paging"
      :default-page-size="limit"
      v-model="record_list"
      style="width: 100%"
      :refresher-enabled="true"
      :auto-clean-list-when-reload="false"
      :auto-scroll-to-top-when-reload="true"
      :show-default-loading-more-text="true"
      loading-more-no-more-text="没有更多了"
      :fixed="false"
      :pagingStyle="{
        height: `calc( 100vh - 200px )`,
      }"
      @query="getVideoList"
    >
      <view v-for="item in record_list" :key="item.id" class="record_list">
        <video :src="item.url" class="video" controls></video>
        <view class="box">
          <view class="video_item">播放: {{ item.show }}</view>
          <view class="video_item">点赞:{{ item.like }}</view>
          <view class="video_item">分享:{{ item.share }}</view>
        </view>
        <button
          type="default"
          class="common_style douyin_btn"
          @tap="godouyin(item.id)"
        >
          去抖音查看
        </button>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { videoList, dyUrl } from "@/api/index";
export default {
  data() {
    return {
      record_list: [],
      page: 1,
      limit: 10,
    };
  },
  onShow() {
    this.getVideoList(this.page);
  },
  methods: {
    getVideoList(page) {
      videoList({ page, page_size: this.limit }).then((res) => {
        if (res.code === 0) {
          this.record_list = res.data.list;
        }
      });
    },
    godouyin: function (val) {
      dyUrl({ video_id: val }).then((res) => {
        if (res.code === 0) {
          uni.setClipboardData({
            data: res.data.url,
            success: function () {
              uni.showToast({
                title: "获取成功, 请去抖音查看",
                icon: "success",
                duration: 2000,
              });
            },
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style>
.common_style {
  font-size: 30rpx;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 50rpx;
}
.operate {
  width: 100%;
  text-align: left;
  margin-top: 40rpx;
}
.video_box {
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cccaca;
  margin-top: 40rpx;
}
.douyin_btn {
  width: 200rpx;
  margin-top: 30rpx;
  font-size: 28rpx;
}
.record_list {
  padding: 20rpx;
  border: 1px solid #bdbcbc;
  margin-bottom: 20rpx;
}
.box {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}
.video_item {
  width: 33.33%;
  font-size: 30rpx;
}
.video {
  width: 100%;
  height: 300rpx;
}
</style>
